<template>
    <!-- 理财历史 -->
    <div class="financialHistory">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list class="financialHistory-list" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
                <div class="list-box" v-for="item in listData" :key="item.id">
                    <header class="box-header">
                        <div class="flex items-center justify-between">
                            <p class="font-26">订单号</p> 
                            <button class="header-button font-26" @click="openShow(item)">详情</button>
                        </div>
                        <p class="py-16 font-28 font-600">{{ item.code }}</p>
                    </header>
                    <main class="font-26">
                        <div class="flex items-center justify-between py-12">
                            <p>已结束</p>
                            <p><span class="mr-4">{{ item.type }}</span><span class="main-title">{{ item.title }}</span></p>
                        </div>
                        <div class="flex items-center justify-between py-12">
                            <p>购买金额</p>
                            <p><span>{{ item.num }}</span><span>{{ item.currency }}</span></p>
                        </div>
                        <div class="flex items-center justify-between py-12">
                            <p>今日收益</p>
                            <p><span>{{ item.day }}</span><span>{{ item.currency }}</span></p>
                        </div>
                        <div class="flex items-center justify-between py-12">
                            <p>总收益</p>
                            <p><span>{{ item.all }}</span><span>{{ item.currency }}</span></p>
                        </div>
                        <div class="flex items-center justify-between py-12">
                            <p>运行时间</p>
                            <p><span>{{ item.startTime }}</span><span>{{ $t('天') }}</span></p>
                        </div>
                        <div class="flex items-center justify-between py-12">
                            <p>结束时间</p>
                            <p>{{ item.endTime }}</p>
                        </div>
                    </main>
                </div>
            </van-list>
        </van-pull-refresh>
        <van-popup v-model="financialHistoryShow" position="bottom" class="financialHistory-pop">
            <financialHistoryPop @close="(val)=> financialHistoryShow = val"/>
        </van-popup>
    </div>
</template>

<script>
import { List, PullRefresh, Popup } from 'vant';
import financialHistoryPop from './financialHistoryPop.vue';
export default {
    components: {
        [List.name]: List,
        [PullRefresh.name]: PullRefresh,
        [Popup.name]: Popup,
        financialHistoryPop,
    },
    data() {
        return {
            loading: false,
            finished:true,
            refreshing:false,
            financialHistoryShow:false,
            listData:[
                {
                    id:0,
                    code:'2024110121030681597000002',
                    title:'XXXXX',
                    type:'活期',
                    num:'100',
                    currency:'USDT',
                    day:'3.5111',
                    all:'43.0654',
                    startTime:'10',
                    endTime:'2024-11-12 20:03:35'
                }
            ],
            listTitle:{
                type:'已结束',
                num:'购买金额',
                day:'今日收益',
                all:'总收益',
                startTime:'运行时间',
                endTime:'结束时间'
            },
        }
    },
    methods: {
        handleImageError(event) {
            event.target.src = this.defaultImage;
        },
        // 上拉加载
        onLoad() {
            console.log(11);
            
        },
        // 下拉刷新
        onRefresh() {
            console.log(22);
            this.refreshing = false;
        },
        openShow(data){
            this.financialHistoryShow = true;
        }
    },
}
</script>

<style lang="scss" scoped>
.financialHistory{
    padding: 20px;
    background-color: #f4f6f8;
    .list-box{
        padding: 20px;
        box-sizing: border-box;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 16px;
        background-color: #fff;
        .box-header{
            border-bottom: 1px dashed #ccc;
            .header-button{
                min-width: 100px;
                height: 60px;
                background-color: #01bd8d;
                border: none;
                color: #fff;
                border-radius: 100px;
            }
        }
        .main-title{
            background-color: #bcff2f;
            padding: 2px;
            color: #222;
            border-radius: 5px;
        }
    }
    ::v-deep .financialHistory-pop{
        width: 100%;
        height: 100%;
    }
}
</style>